<template>
	<view class="container">
		<view class="input-area">
			<text>输入值:</text>
			<input 
				type="text" 
				v-model="title" 
				placeholder="请输入内容"
				style="border: 1px solid #ccc; padding: 10rpx; margin: 10rpx 0; width: 300rpx;" 
			/>
		</view>
		<view class="text-area">
			<text>回传值:</text>
			<input 
				type="text" 
				:value="callBackValue"
				placeholder="等待子组件回传"
				style="color: red; border: 1px solid #ccc; padding: 10rpx; margin: 10rpx 0; width: 300rpx;" 
				readonly 
			/>
		</view>
		
		<!-- 子组件A，接收父组件的值 -->
		<compA :intent="title" @pass-to-b="handlePassToB"></compA>
		
		<!-- 子组件B，接收从A传来的值并可以回传给父组件 -->
		<compB 
			:value-from-a="valueFromAToB" 
			@callBackFun="callBack"
		></compB>
	</view>
</template>

<script>
	import compA from '../../components/comA.vue';
	import compB from '../../components/comB.vue';

	export default {
		components: {
			compA,
			compB
		},
		data() {
			return {
				title: '123', // 初始值设为123以匹配图片
				callBackValue: '',
				valueFromAToB: '' // 存储从A传递给B的值
			}
		},
		methods: {
			// 处理从A组件传递来的值，再传递给B组件
			handlePassToB(value) {
				console.log("父组件收到A传来的值，准备传给B:", value);
				this.valueFromAToB = value;
			},
			
			// 处理从B组件回传的值
			callBack(msg) {
				console.warn("父组件收到子组件B的回传值：", msg);
				this.callBackValue = msg;
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.input-area,
	.text-area {
		margin: 30rpx 0;
		display: flex;
		align-items: center;
		background-color: white;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	text {
		font-size: 28rpx;
		margin-right: 20rpx;
		width: 150rpx;
		flex-shrink: 0;
	}
</style>